<template>

  <div id="treeMain">
    <DataSourceTree id="dataSourceTree"
                    @clickTable="clickTable"
                    @clickDatabase="clickDatabase"
                    @clickMenu="clickMenu"
    />
    <n-modal v-model:show="showEditOrAddModel"
             preset="card"
             style="width: 50%"
    >

      <template #header>
        <n-text>{{modelTitle}}</n-text>
      </template>
      <ConnectInfoAddOrEdit :connectInfo="opClickConnectObject"/>

    </n-modal>
  </div>


</template>

<script setup lang="ts">
import {ref, computed, defineEmits} from "vue";
import {TreeOption} from "naive-ui";
import MySqlConnectInfo from "../../../model/mysql/MySqlConnectInfo";
import {
  SchemasOperation, TreeLevelEnum
} from '../../../model/mysql/TreeOperationInfo.ts'
import ConnectSourceOperationEnum from "../../../enum/tree/ConnectSourceOperationEnum";
import {listenToMainEvent} from "../../../renderer/tree/TreeMainRederer";

const showEditOrAddModel = ref(false);
const opClickConnectObject = ref<MySqlConnectInfo>();

const emit = defineEmits(['clickDatabase', 'clickTable', 'clickMenu'])


const modelTitle = computed(()=>{
  return  opClickConnectObject.value?.id ? '编辑连接': '新增连接'
})

const clickDatabase = (res) => {
  emit('clickDatabase', res);
  console.log("点击数据库", res)
}

const clickTable = (res) => {
  emit('clickTable', res)
  console.log("点数据表", res)
}

/**
 *
 * @param tree 数组的响应式对象
 * @param operation
 * @param level 层级
 * @param keyArr key的数组信息
 * @param node 节点
 * @param MysqlConnectInfoMap
 */
const clickMenu = (
    tree: ref<TreeOption[]>,
    operation: String,
    level: number, keyArr: [],
    node: TreeOption,
    MysqlConnectInfoMap: Map<number, MySqlConnectInfo>) => {

  console.log("菜单点击", operation, level, keyArr, node, MysqlConnectInfoMap)
  let connectID = parseInt(keyArr[1])
  if (level === TreeLevelEnum.CONNECTION) {
    //编辑菜单
    if (ConnectSourceOperationEnum.editConnection.code === operation) {
      opClickConnectObject.value = MysqlConnectInfoMap.get(connectID)
      showEditOrAddModel.value = true;
    }
  }
  //数据库上的操作
  else if (level === TreeLevelEnum.DATASOURCE){

  }
}
listenToMainEvent(opClickConnectObject, showEditOrAddModel)
</script>

<style scoped>
#treeMain{
  width: 100%;
  height: 100%;
}
#dataSourceTree{
  width: 100%;
  height: 100%;
}
</style>